<template>
  <div class="big">
    <div class="box">
      <i class="el-icon-shopping-cart-full"></i>
      <p>我的购物车</p>
      <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
    </div>
    <div class="empty" v-if="!cartList">
      <div class="mg"></div>
      <div class="text">
        <h2>您的购物车还是空的！</h2>
        <p>快去购物吧！</p>
      </div>
    </div>
    <div class="full" v-show="cartList">
      <el-table ref="multipleTable" :data="cartList" tooltip-effect="dark"  @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column>
                    <template v-slot="scope">
                        <img
              :src="'http://106.15.179.105:3000/' + scope.row.productImg"
              alt=""
            />       </template
          >
                  </el-table-column
        >
                <el-table-column prop="productName" label="商品名称"
          > </el-table-column
        >
                <el-table-column prop="price" label="单价"> </el-table-column>
                <el-table-column prop="num" label="数量">
                    <template v-slot="scope">
                        <el-input-number
              v-model="scope.row.num"
               @change="handleChange($event,scope.row.productID)"
               :min="1"
                :max="scope.row.maxNum"
            ></el-input-number>
                      </template
          >
                  </el-table-column
        >
                <el-table-column label="小计">
                    <template v-slot="scope">
                        {{
              scope.row.price * scope.row.num
            }}
                      </template
          >
                  </el-table-column
        >
                <el-table-column label="操作">
               <template scope="scope">
               <!-- <el-popover placement="top" width="160"  v-model="visible">
              <p>这是一段内容这是一段内容确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button type="primary" size="mini" @click="visible = false"
                  >确定</el-button
                >
              </div>
            </el-popover>
            <span class="el-icon-error" @click="visible = true"></span>   > -->
            <span
              class="el-icon-error"
              @click="deleteCart(scope.row.productID)"
            ></span>
                 </template
          >
        </el-table-column>
              </el-table
      >
      <div class="bottom">
        <div class="bottom-left">
          <span>
            <router-link to="" class="a">继续购物</router-link>
          </span>
          <span class="sep">|</span>
          <span class="cart-total">
            共
            <span class="cart-total-num"></span>{{this.num}} 件商品，已选择
            <span class="cart-total-num">{{this.allNum}}</span>件
          </span>
        </div>
        <div class="bottom-right">
          <span>
            <span class="total-price-title">合计：</span>
            <span class="total-price">{{this.allPrice}}元</span>
          </span>
          <router-link to="">
            <div class="btn-primary-disabled">去结算</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cart from "../API/cart";
export default {
  name: "",
  data() {
    return {
      cartList: [],
      /* visible: false, */
      num:0,
      cartData:[]
    };
  },
  props: [], //接收父组件传过来的值
  components: {},
  mounted() {},
  activated() {
    this.getCart();
  },
  methods: {
    //获取购物车所有数据
    async getCart() {
      const { data: res } = await cart.getCart({
        user_id: this.$store.state.userName.id,
      });
      console.log(res);
      this.cartList = res.shoppingCartData;
      this.num = 0
      this.cartList.forEach(item=>{
          this.num += item.num
      })
    },
    //删除购物车中相应id的数据
    async deleteCart(id) {
      console.log(id);
      const { data: res } = await cart.deleteCart({
        user_id: this.$store.state.userName.id,
        product_id: id,
      });
      console.log(res);
      if (res.code == "001") {
        this.getCart();
        this.$notify({
          title: "成功",
          message: res.msg,
          type: "success",
        });
      } else {
        if (res.code !== "001") {
          this.$notify({
            title: "失败",
            message: res.msg,
            type: "success",
          });
        }
      }
    },
      //改变个数
    async handleChange(value,id) {
        console.log(id)
        const { data: res } = await cart.updateShoppingCart({
        user_id: this.$store.state.userName.id,
        product_id: id,
        num: value
      });
        if(res.code == "001"){
            this.$notify({
            message: res.msg,
            type: "success",
          });
        }
      },
      //改变个数
       handleSelectionChange(val) {
           this.cartData = val
           console.log(this.cartData)
        //   this.allNum = 0
        //   this.allPrice = 0
        //   val.forEach(item => {
        //   this.allNum += item.num
        //   this.allPrice += item.num*item.price
        // });
      }
  },
  computed: {
    //个数
      allNum:function(){
          console.log(this.cartData)
          var a=0
          this.cartData.forEach(item => {
              return a+=item.num
          });
          return a
      },
      //总价格
      allPrice:function(){
          console.log(this.cartData)
          var b=0
          this.cartData.forEach(item => {
              return b+=item.num*item.price
          });
          return b
      },
  },
  watch: {
      
  },
};
</script>

<style lang='scss'scoped>
.big {
  width: 100%;

  .box {
    margin: 0 auto;
    /*  background: red; */
    height: 64px;
    margin-top: 25px;
    border-bottom: 3px solid rgb(255, 103, 0);
    font-size: 28px;
    display: flex;
    line-height: 64px;

    i {
      line-height: 64px;
      color: rgb(255, 103, 0);
      margin-left: 198.5px;
      font-weight: 700;
      margin-right: 14px;
    }
    span {
      font-size: 16px;
      margin-left: 20px;
      margin-top: 10px;
      color: #b0b0b0;
    }
  }
  .empty {
    width: 100%;
    height: 535px;
    display: flex;
    background: #f5f5f5;
    margin: 0 auto;
    .mg {
      width: 399px;
      height: 400px;
      margin-top: 10px;
      background: url("../../public/imgs/cart-empty.png") no-repeat 100% 100%;
    }
    .text {
      color: #b0b0b0;
      h2 {
        font-size: 36px;
        margin: 170px 120px 15px;
      }
      p {
        font-size: 20px;
        margin-left: 120px;
      }
    }
  }
  .full {
    width: 100%;
    background: #f5f5f5;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    /*  margin-bottom: 80px; */
    /*   margin: 0 auto; */
    .el-table {
      width: 85%;
      /*   border: 1px solid darkblue; */
      margin: 0 auto;

      img {
        width: 80px;
        height: 80px;
      }
    }
    .bottom {
      width: 85%;
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      margin: 0 auto;
      margin-top: 20px;

      .bottom-left {
        float: left;
        span {
          .a {
            line-height: 50px;
            margin-left: 32px;
            color: #757575;
            text-decoration: none;
            font-size: 16px;
          }
          .a:hover {
            color: #ff6700;
          }
        }
        .sep {
          color: #eee;
          margin: 0 20px;
        }
        .cart-total {
          color: #757575;
        }
        .cart-total-num {
          color: #ff6700;
        }
      }
      .bottom-right {
        float: right;
        .total-price-title {
          color: #ff6700;
          font-size: 14px;
        }
        .total-price {
          color: #ff6700;
          font-size: 30px;
        }
        .btn-primary {
          float: right;
          width: 200px;
          text-align: center;
          font-size: 18px;
          margin-left: 50px;
          background: #ff6700;
          color: #fff;
        }
        .btn-primary-disabled {
          float: right;
          width: 200px;
          text-align: center;
          font-size: 18px;
          margin-left: 50px;
          background: #e0e0e0;
          color: #b0b0b0;
        }
        .btn-primary:hover {
          background-color: #f25807;
        }
      }
    }
  }
}
</style>